<template>
  <div id="app">
    <div style="text-align: left;height: 50px;margin-top: 20px;">
      <el-form :inline="true" :model="queryParam" size="medium">
        <el-form-item label="企业名">
          <el-autocomplete
              v-model="queryParam.companyName"
              popper-class="my-autocomplete"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入企业名称">
            <template slot-scope="{ item }">
              <span>{{ item.id }} --- {{ item.value }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="总数">
          <el-switch
              @change="queryCompaniesByName()"
              v-model="queryParam.isCount"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="queryCompaniesByName">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-table v-loading="listLoading"
                :data="list.companies"
                border
                :header-cell-style="headClass"
                :cell-style="rowClass"
                style="width: 100%">
        <el-table-column
            prop="companyName"
            label="企业名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="companySize"
            label="公司规模"
            width="180">
        </el-table-column>
        <el-table-column
            prop="profession"
            label="公司行业"
            width="180">
        </el-table-column>
        <el-table-column
            prop="introduce"
            label="公司介绍"
            width="250">
        </el-table-column>
        <el-table-column
            prop="address"
            label="公司地址"
            width="250">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope='scope'>
            <el-button type="primary" size="mini" @click='myRead(scope.row)'>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底栏容器 -->
    <el-footer style="text-align: left;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageNum"
          :page-sizes="[10,20,30,40,50,100,200,500,1000]"
          :page-size="queryParam.pageSize"
          :layout="queryParam.isCount ? 'total, sizes, prev, pager, next, jumper' : 'sizes, prev, next'"
          :total="list.totalNum">
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>
import {getCompanies, getCompaniesName} from "@/api";
import jwtUtil from "jwt-decode";

export default {
  name: "queryCompany",
  data() {
    return {
      user: {
        userId: '',
        objectId: '',
        userType: ''
      },
      listLoading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        isCount: false,
        companyName: ''
      },
      companyId: '',
      companyName: '',
      companiesName: [],
      list: {
        companies: [],
        totalNum: -1
      }
    }
  },
  methods: {
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    handleSizeChange(val) {
      this.queryParam.pageSize = val
      this.queryCompaniesByName()
    },
    handleCurrentChange(val) {
      this.queryParam.pageNum = val
      this.queryCompaniesByName()
    },
    //方法
    querySearchAsync(queryString, callback) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        getCompaniesName({companyName: queryString})
            .then(res => {
              this.companiesName = []
              res.data.companies.forEach(it => {
                this.companiesName.push({'value': it.companyName, id: it.id})
              })
              callback(this.companiesName);
            })
      }, 1000 * Math.random());
    },
    queryCompaniesByName() {
      this.listLoading = true
      getCompanies(this.queryParam).then(res => {
        this.list.companies = res.data.companies
        this.list.totalNum = res.data.totalNum
        this.listLoading = false
      })
    },
    myRead(item) {
      if (this.user.userType === 1) {
        this.$router.push({path: '/seeker/readCompany', query: {id: item.id}})
      } else if (this.user.userType === 2) {
        this.$router.push({path: '/company/readCompany', query: {id: item.id}})
      }
    }
  },
  mounted() {
    window.app = this;
  },
  created() {
    this.user = jwtUtil(window.localStorage.getItem('Token'))
  }
}
</script>

<style scoped>


</style>